<template>
  <Frame>
    <template #main>
      <PageCard id="pageCard" title="会议管理">
        <div id="inputs">
          <el-input
            v-model="conferenceName"
            style="max-width: 600px"
            placeholder="查找包含输入的会议名"
            class="input-with-select"
          >
            <template #prepend> 会议名 </template>
            <template #append>
              <el-icon
                @click="
                  conferenceName = '';
                  reload();
                "
                ><Delete
              /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="reload"> 查询 </el-button>
          <el-button type="primary" @click="addConferenceVisible = true"> 新增会议 </el-button>
        </div>
        <el-table :data="conferenceList" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="id" label="会议ID" width="290" v-if="invisible" />
          <el-table-column prop="name" label="会议名称" width="180px" />
          <el-table-column prop="address" label="会议地址" />
          <el-table-column prop="startTime" label="会议起始时间" width="150px">
            <template #default="scope">
              {{ new Date(scope.row.startTime).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="endTime" label="会议结束时间" width="150px">
            <template #default="scope">
              {{ new Date(scope.row.endTime).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="comm" label="会议描述" />
          <el-table-column prop="createTime" label="创建时间" width="150px" v-if="false">
            <template #default="scope">
              {{ new Date(scope.row.createTime).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="近一次更新时间"
            width="150px"
            v-if="false"
          >
            <template #default="scope">
              {{ scope.row.updateTime == null ? "" : new Date(scope.row.updateTime).toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button
                size="small"
                @click="this.checkConferenceDetailId = scope.row.id; checkConferenceDetailVisible = true"
              >
                查看
              </el-button>
              <el-button
                size="small"
                @click="this.editConferenceId = scope.row.id; editConferenceVisible = true"
              >
                编辑
              </el-button>
              <el-button
                size="small"
                type="danger"
                @click="deleteConference(scope.row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </PageCard>
      <div id="pagination" class="card">
        <el-pagination
          v-model:current-page="current"
          v-model:page-size="fetchSize"
          :page-sizes="[5, 10]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="conferenceCount"
          @size-change="reload"
          @current-change="reload"
        />
      </div>
    </template>
  </Frame>

  <!--查看会议弹窗（务必关闭时销毁元素）-->
  <el-dialog title="查看会议详情" v-model="checkConferenceDetailVisible" width="70vw" @closed="reload" destroy-on-close>
    <CheckConferenceDetail :checkConferenceDetailId = "checkConferenceDetailId" />
  </el-dialog>

  <!--编辑会议弹窗（务必关闭时销毁元素）-->
  <el-dialog title="编辑会议信息" v-model="editConferenceVisible" width="60vw" @closed="reload" destroy-on-close>
    <EditConference :editConferenceId = "editConferenceId" />
  </el-dialog>
  <!--添加会议弹窗（务必关闭时销毁元素）-->
  <el-dialog title="添加会议信息" v-model="addConferenceVisible" width="60vw" @closed="reload" destroy-on-close>
    <AddConference />
  </el-dialog>
</template>

<script>
import axios from "axios";
import Frame from "../components/frame.vue";
import PageCard from "../components/pageCard.vue";
import { baseUrl } from "../main.js";
import { show_success_msg, show_error_msg } from "../js/msg.js";
import { Delete } from "@element-plus/icons-vue";
import EditConference from "../components/editConference.vue"
import AddConference from "../components/addConference.vue"
import CheckConferenceDetail from "../components/checkConferenceDetail.vue"
export default {
  components: {
    Frame,
    PageCard,
    Delete,
    EditConference,
    AddConference,
    CheckConferenceDetail,
  },
  data() {
    return {
      list: [],
      baseUrl: baseUrl,
      conferenceName: "",
      conferenceList: [],
      conferenceCount: 0,
      orders: "",
      offset: 0,
      fetchSize: 10,
      current: 1,
      editConferenceVisible: false,
      editConferenceId: "",
      checkConferenceDetailVisible: false,
      addConferenceVisible: false,
      checkConferenceDetailId: "",
    };
  },

  methods: {
    getConferenceCount() {
      axios
        .get(this.baseUrl + "/Conference/getCountByName?name=" + this.conferenceName)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            this.conferenceCount = re_data.data;
          } else {
            show_error_msg("获取会议数量失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("获取会议数量失败", "网络异常");
        });
    },
    getConferenceDatas() {
      axios
        .get(
          this.baseUrl +
            "/Conference/findByName?name=" +
            this.conferenceName +
            "&orders=" +
            this.orders +
            "&offset=" +
            this.offset +
            "&fetchSize=" +
            this.fetchSize
        )
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            this.conferenceList = re_data.data;
          } else {
            show_error_msg("获取会议数据失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("获取会议数量失败", "网络异常");
        });
    },
    deleteConference(conferenceId) {
      let formData = new FormData();
      formData.append("id", conferenceId);
      axios
        .post(this.baseUrl + "/Conference/deleteById", formData)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            show_success_msg("删除会议数据成功");
            this.reload();
          } else {
            show_error_msg("删除会议数据失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("删除会议数据失败", "网络异常");
        });
    },
    reload() {
      this.getConferenceCount();
      this.offset = (this.current - 1) * this.fetchSize;
      this.getConferenceDatas();
    },
  },
  mounted() {
    this.getConferenceCount();
    this.getConferenceDatas();
  },
};
</script>

<style scoped>
#pageCard {
  height: 87vh;
}
#inputs {
  padding-top: 2vh;
  height: 8vh;
}

#inputs > * {
  margin-right: 0.8vw;
}

#inputs > .input-with-select {
  width: 20vw;
}
#pagination {
  margin-top: 5px;
  padding: 5px 18px;
}
</style>